<!doctype html> 
<html lang="zh_CN">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./fonts/boostrapicons/bootstrap-icons.css">
    <title>栅格系统-01</title>
    <style>
        .row>div{
            background-color: #ccc;
            border:1px solid darkgray;
            height: 60px;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="row mt-1">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
      </div>
    </div>
    <hr>
     <div class="container-fulid">
       <div class="row">
            <div class="col-md-3 col-sm-4"></div>
            <div class="col-md-3 col-sm-4"></div>
            <div class="col-md-3 col-sm-4"></div>
            <!-- d-sm-none 表示在sm尺寸时隐藏  d-md-block 在md的尺寸是显示 -->
            <div class="col-md-3 d-sm-none d-md-block"></div>
       </div>
       <div class="row">
        <div class="col-md col-sm-4"></div>
        <div class="col-md col-sm-4"></div>
        <div class="col-md col-sm-4"></div>
        <!-- d-sm-none 表示在sm尺寸时隐藏  d-md-block 在md的尺寸是显示 -->
        <div class="col-md d-sm-none d-md-block"></div>
       </div>
     </div>
     <h1>offset</h1>
     <div class="container-fluid">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
         <div class="col"></div>
       </div>
       <div class="row">
         <div class="col-md-5 offset-md-4">offset-md-4</div>
       </div>
       <!-- justify-content-md-center表示col会在row中水平居中 -->
       <div class="row justify-content-md-center">
         <div class="col-md-5">boostrap4</div>
       </div>
       <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      </div>
      <div class="row row-cols-2">
        <div class="col">col-1</div>
        <div class="col">col-2</div>
        <div class="col">col-3</div>
        <div class="col">col-4</div>
        <div class="col">col-5</div>
      </div>
     </div>

     <h1>对齐方式</h1>
     <div class="container" >
       <!-- align-items-center:将row中的col设置为垂直居中 -->
       <div class="row align-items-center" style="height:400px;background-color: pink;">
         <div class="col">col-1</div>
         <div class="col">col-2</div>
         <div class="col">col-3</div>
         <div class="col">col-4</div>
       </div>
       <div class="row justify-content-around"  style="background-color: pink;">
        <div class="col-3">col-1</div>
        <div class="col-3">col-2</div>
        <div class="col-3">col-3</div> 
      </div>
     </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/plugins/bootstrap/jquery.slim.min.js" ></script>
    <script src="./js/plugins/bootstrap/popper.min.js"></script>
    <script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
  </body>
</html>